<template>
  <div>
    <Form ref="EditForm" :model="formData" label-position="top">
      <Row :gutter="16">
        <Col :xs="24" :md="20">
          <FormItem
            label="标题"
            prop="Art_Title"
            :rules="{required: true, message:'不能为空', trigger: 'blur'}"
          >
            <Input v-model="formData.Art_Title"></Input>
          </FormItem>
        </Col>

        <Col :xs="4" :md="2">
          <FormItem label="是否推荐" prop="Art_IsRecommend">
            <Switch v-model="formData.Art_IsRecommend==1?true:false" size="large">
              <span slot="open">是</span>
              <span slot="close">否</span>
            </Switch>
          </FormItem>
        </Col>

        <Col :xs="4" :md="2">
          <FormItem label="是否隐藏" prop="Art_IsHide">
            <Switch v-model="formData.Art_IsHide?true:false" size="large">
              <span slot="open">是</span>
              <span slot="close">否</span>
            </Switch>
          </FormItem>
        </Col>

        <Col :xs="24" :md="24">
          <FormItem label="所属分类" prop="Art_Label">
            <!--<DictSelect  :multiple="true"  v-model="formData.Art_Label" strategy="SHOW_CHILD"  label="ArticleLabel"  placeholder='请选择' ></DictSelect>-->
            <TreeSelect
              :multiple="true"
              strategy="SHOW_CHILD"
              ret-attr="value"
              v-model="formData.Art_Label"
              :treeData.sync="Art_Labels"
              placeholder="请选择"
            ></TreeSelect>
          </FormItem>
        </Col>

        <!-- <Col :xs="24" :md="24">
            <FormItem label="上传视频" prop="Art_VideoPath">
                <Input type="text" v-model="formData.Art_VideoPath">
                <Button type="info" slot="append">选择文件</Button>
                </Input>
            </FormItem>
        </Col>-->
        <Col :xs="24" :md="24">
          <FormItem label="手机端展现形式" prop="Art_ViewStyle">
            <Row :gutter="16" justify="end" class="ViewStyleItems">
              <Col span="4" v-for="i in viewStyle" :key="i">
                <div
                  :class="['item',{'active':formData.Art_ViewStyle==i}]"
                  @click="setViewStyle(i)"
                >
                  <div class="hd"></div>
                  <img :src="'/dist/manage/static/images/ArtViewStyle/'+i+'.png'">
                </div>
              </Col>
            </Row>
          </FormItem>
        </Col>

        <Col :xs="24" :md="24">
          <FormItem label="内容" prop="Art_Content">
            <Ueditor
              ref="ue"
              name="ww"
              :config="editConfig"
              toolbar="complate"
              :content="formData.Art_Content"
            ></Ueditor>
          </FormItem>
        </Col>

        <Col :xs="24" :md="24">
          <FormItem label="简介" prop="Art_Intro">
            <Input
              v-model="formData.Art_Intro"
              type="textarea"
              :autosize="{minRows: 2,maxRows: 5}"
              placeholder="Enter something..."
            ></Input>
          </FormItem>
        </Col>

        <Col :xs="24" :md="24">
          <FormItem label="关键字" prop="KeyWord">
            <Input v-model="formData.KeyWord"></Input>
          </FormItem>
        </Col>

        <Col :xs="24" :md="3">
          <FormItem label="浏览量" prop="Art_ReadCount">
            <Input v-model="formData.Art_ReadCount"></Input>
          </FormItem>
        </Col>

        <Col :xs="24" :md="7">
          <FormItem label="封面显示在图文信息前(仅限大图)" prop="Art_IsPreShowImg">
            <Select v-model="formData.Art_IsPreShowImg">
              <Option :value="0">否</Option>
              <Option :value="1">是</Option>
            </Select>
          </FormItem>
        </Col>

        <Col :xs="24" :md="14">
          <FormItem label="文章来源" prop="Art_ArticleFrom">
            <Input v-model="formData.Art_ArticleFrom"></Input>
          </FormItem>
        </Col>

        <!-- /res/upload/img/20180521/1526883382-47E0D4.png -->
        <Col :xs="6" :md="4">
          <FormItem label="封面小图(100x100)" prop="Art_SignImg_s">
            <MUpload
              fileType="img"
              v-model="formData.Art_SignImg_s"
              action="/base/upload/img"
              :cropper-size="[100,100]"
            >
              <div class="img_s" :style="{'backgroundImage':'url('+formData.Art_SignImg_s+')'}"></div>
            </MUpload>
          </FormItem>
        </Col>

        <Col :xs="18" :md="20">
          <FormItem label="封面大图(640x360)" prop="Art_SignImg_b">
            <MUpload
              fileType="img"
              v-model="formData.Art_SignImg_b"
              action="/base/upload/img"
              :cropper-size="[640,360]"
            >
              <div class="img_b" :style="{'backgroundImage':'url('+formData.Art_SignImg_b+')'}"></div>
            </MUpload>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col>
          <FormItem>
            <Button type="primary" @click="handleSubmit()">提交</Button>
            <Button @click="handleReset()" style="margin-left: 8px">重置</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import AppFrame from "../../../libs/app-frame";
import DictSelect from "../../../components/dict-select";
import TreeSelect from "../../../components/tree-select";
import Ueditor from "../../../../../components/ueditor";
import MUpload from "../../../components/m-upload";

export default {
  components: {
    DictSelect,
    TreeSelect,
    Ueditor,
    MUpload
  },
  data: function() {
    return {
      state: {
        //数据加载状态
        isLoadingData: false,
        isChangeData: false
      },
      editConfig: {
        initialFrameWidth: null,
        initialFrameHeight: 300,
        autoHeightEnabled: false
      },
      viewStyle: [1, 2, 3, 4, 5, 6],
      Art_Labels: [],
      formData: {
        Art_Title: "",
        Art_IsRecommend: 0,
        Art_IsHide: 0,
        Art_Label: [],
        Art_VideoPath: "",
        Art_ViewStyle: 6,
        Art_Content: "",
        KeyWord: "",
        Art_ReadCount: 0,
        Art_Intro: ""
      },
      query: {}
    };
  },
  created: function() {
    this.query = this.$route.query;
    this.getFormData();
  },
  computed: {},
  methods: {
    getFormData() {
      let self = this;
      self.state.isLoadingData = true;
      let postData = {
        id: self.query.id || ""
      };
      AppFrame.Http.Post("/manage-api/cms/article/getItem", postData)
        .then(function(Ret) {
          console.log(Ret.Data);
          if (Ret.Result === 1 && Ret.Data) {
            self.Art_Labels = Ret.Data.ArtLabels;
            self.formData = Ret.Data.Model;
            self.formData.Art_Content = self.formData.Art_Content.replace(
              /{StaticUrl}/g,
              ""
            );
            self.formData.Art_Label = ("" + self.formData.Art_Label).split(",");
            console.log(self.formData.Art_Label);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },

    setViewStyle: function(style) {
      this.$set(this.formData, "Art_ViewStyle", style);
    },
    handleSubmit() {
      let self = this;
      var UeContent = this.$refs.ue.getUEContent();
      console.log(UeContent);
      self.formData.Art_Content = UeContent.ContentHtml;
      self.formData.LastExistImg =
        UeContent.LastExistImg.length > 0
          ? UeContent.LastExistImg.join(",")
          : "";
      if (self.formData.Art_Intro === "") {
        self.formData.Art_Intro = AppFrame.Tools.FixLen(
          UeContent.ContentTxt,
          100
        );
      }
      console.log(self.formData.Art_Label);
      // if( self.formData.Art_Label && self.formData.Art_Label.length>0){
      //     self.formData.Art_Label= self.formData.Art_Label.join(',');
      // }else{
      //     self.formData.Art_Label="";
      // }

      console.log(self.formData);
      this.$refs["EditForm"].validate(valid => {
        if (valid) {
          AppFrame.Http.Post(
            "/manage-api/cms/article/edit",
            self.formData,
            function(err, ret) {
              console.log(ret);
              if (ret && ret.Result == 1) {
                self.$Message.success("保存成功");
                self.$router.go(-1);
              } else {
                self.$Message.error(ret.Msg);
              }
            }
          );
        }
      });
    },
    handleReset() {
      this.$refs["EditForm"].resetFields();
    }
  }
};
</script>

<style scoped>
.ViewStyleItems {
  position: relative;
}

.ViewStyleItems .item {
  margin: 0px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.ViewStyleItems .item .hd {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: Red;
  position: absolute;
  right: 25px;
  bottom: 15px;
  z-index: 10;
  display: none;
}

.ViewStyleItems .item.active {
  border: 1px solid #999;
  cursor: pointer;
}

.ViewStyleItems .item.active .hd {
  display: block;
}

.ViewStyleItems .item img {
  width: 100%;
  height: auto;
}

.img_s {
  cursor: pointer;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: dotted 1px #ddd;
  background-position: center center;
  background-size: cover;
}

.img_b {
  cursor: pointer;
  width: 177px;
  height: 100px;
  overflow: hidden;
  border: dotted 1px #ddd;
  background-position: center center;
  background-size: cover;
}
</style>
